<template>
  <div class="p-[20px] bg-white">
    <vxe-grid v-bind="gridOptions">
      <template #operate="scope">
        <RouterLink
          :to="{
            name: 'PaymentStoreSub',
            query: { storeCode: scope.row.storeCode },
          }"
        >
          <el-button type="text">子商家管理</el-button>
        </RouterLink>
        <RouterLink
          :to="{
            name: 'PaymentStoreReivcer',
            query: {
              storeCode: scope.row.storeCode,
              merCupNo: scope.row.merCupNo,
            },
          }"
        >
          <el-button type="text">绑定分账方</el-button>
        </RouterLink>
        <RouterLink
          :to="{
            name: 'PaymentSplit',
            query: { storeCode: scope.row.storeCode },
          }"
        >
          <el-button type="text">分账记录</el-button>
        </RouterLink>
      </template>
    </vxe-grid>
  </div>
</template>

<script lang="ts" setup>
import CommonAPI from "@/api/common";
import PaymentAPI, { PaymentStoreVO } from "@/api/payment";
import { useDict } from "@/composes/useDict";
import { reactive } from "vue";
import { VxeGridProps } from "vxe-table";

interface RowVO {
  [key: string]: any;
}

const router = useRouter();

const handleEdit = (row: PaymentStoreVO) => {
  router.push({ name: "StoreNew", query: { id: row.id } });
};

const gridOptions = reactive<VxeGridProps<PaymentStoreVO>>({
  showOverflow: true,
  border: true,
  height: 548,
  rowConfig: {
    keyField: "id",
  },
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
  },
  toolbarConfig: {
    custom: true,
  },
  layouts: ["Top", "Form", "Table", "Bottom", "Pager"],
  formConfig: {
    // data: {
    //   createdAt: "",
    //   email: "",
    //   nickname: "",
    // },
    items: [],
  },
  proxyConfig: {
    form: true,
    // 对应响应结果 { result: [], page: { total: 100 } }
    ajax: {
      // 接收 Promise 对象
      query: ({ page, form }) => {
        return PaymentAPI.getStoreList({
          ...form,
          pageNum: page.currentPage,
          size: page.pageSize,
        });
      },
    },
  },
  columns: [
    { type: "seq", width: 70, fixed: "left" },
    { title: "支付开通时间", field: "createdAt", minWidth: 160 },
    {
      title: "商家编号<br/>支付商家号",
      type: "html",
      align: "center",
      field: "storeCode",
      minWidth: 160,
      formatter: ["doubleProp", "merchantNo"],
    },
    { title: "商家名称", field: "name", minWidth: 160 },
    {
      title: "店主姓名<br/>店主电话",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "name"],
      field: "avatar",
      minWidth: 160,
    },
    {
      title: "所属通道<br/>B2B收银台-扫码终端号",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "termProfessionNo"],
      field: "channelTypeName",
      minWidth: 160,
    },
    {
      title: "appid<br/>机构号",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "orgCode"],
      field: "appid",
      minWidth: 160,
    },
    // {
    //   title: "钱包ID<br/>提款模式",
    //   type: "html",
    //   align: "center",
    //   formatter: ["doubleProp", "managerTel"],
    //   field: "managerName",
    //   minWidth: 160,
    // },
    {
      title: "子商家数量<br/>分账方数量",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "subMerchantReceiverCount"],
      field: "subMerchantCount",
      minWidth: 160,
    },
    // {
    //   title: "渠道名称<br/>渠道编号",
    //   type: "html",
    //   align: "center",
    //   formatter: ["doubleProp", "managerTel"],
    //   field: "managerName",
    //   minWidth: 160,
    // },
    {
      title: "操作",
      field: "operate",
      fixed: "right",
      align: "center",
      slots: { default: "operate" },
      minWidth: 300,
    },
  ],
});

const initFormConfig = (dicts: any) => {
  console.log(dicts);
  if (gridOptions.formConfig) {
    gridOptions.formConfig.items = [
      // 商家名称
      {
        field: "nickname",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家名称",
          },
        },
      },
      {
        field: "storeCode",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家编号",
          },
        },
      },
      {
        field: "merchantNo",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "支付商家号",
          },
        },
      },
      // {
      //   field: "storeCode",
      //   title: "",
      //   span: 8,
      //   itemRender: {
      //     name: "ElInput",
      //     props: {
      //       placeholder: "店主姓名",
      //     },
      //   },
      // },
      // {
      //   field: "storeCode",
      //   title: "",
      //   span: 8,
      //   itemRender: {
      //     name: "ElInput",
      //     props: {
      //       placeholder: "店主电话",
      //     },
      //   },
      // },
      // {
      //   field: "storeCode",
      //   title: "",
      //   span: 8,
      //   itemRender: {
      //     name: "ElInput",
      //     props: {
      //       placeholder: "渠道名称/渠道编号",
      //     },
      //   },
      // },
      {
        field: "channelType",
        title: "",
        span: 8,
        itemRender: {
          name: "ElSelect",
          options: dicts.channelTypeList,
          props: {
            placeholder: "所属通道",
          },
        },
      },
      {
        field: "appid",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "appid",
          },
        },
      },
      {
        field: "orgCode",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "机构号",
          },
        },
      },
      {
        field: "createdAt",
        title: "",
        span: 12,
        itemRender: {
          name: "ElDatePicker",
          props: {
            type: "daterange",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
          },
        },
      },
      // 搜索按钮
      {
        itemRender: {
          name: "VxeButtonGroup",
          options: [{ type: "submit", content: "搜索", status: "primary" }],
        },
      },
    ];
  }
};

useDict((dict) => {
  initFormConfig(dict);
});
</script>
